<template>
    <div class="box">
        <div class="title">
            <span>ID</span>
            <span>内容</span>
            <span>作者</span>
            <span>更新时间</span>
            <span>创建时间</span>
            <span v-if="isMy">操作</span>
        </div>
        <div class="content" v-for="item of list" :key=item.id>
            <span>{{item.id}}</span>
            <span>{{item.content}}</span>
            <span>{{item.author}}</span>
            <span>{{item.updatetime}}</span>
            <span>{{item.creattime}}</span>
            <span class="btns" v-if="isMy">
                <span class="garbage-btns" v-if="$route.meta.isGarbage">
                    <button @click="handleMsgStatus(item,'recovery')">恢复</button>
                    <button class="danger"  @click='handleMsgStatus(item)'>确认删除</button>
                </span>
                <span v-else>
                    <button @click="update(item)">更新</button>
                    <button class="danger"  @click='handleMsgStatus(item)'>删除</button>
                </span>
                
            </span>
        </div>
        
    </div>
</template>
<script>
export default {
    props:['list','isMy'],
    methods:{
        update(data){
            this.$emit('handleForm',data)
        },
        handleMsgStatus(data,recovery){
            this.$emit('handleMsgStatus',data,recovery)
        }
    }
}
</script>
<style lang="stylus" scoped>
    .box
        width 1000px
        margin 0 auto
        padding 24px
        border: 1px solid #ebebeb;
        border-radius: 3px;
        .content,.title
            display flex
            flex-wrap wrap
            justify-content space-between
            border-bottom: 1px solid #ebeef5;
        span 
            display flex 
            width 16%
            height 40px 
            line-height 40px
            padding 20px 0
        span.btns span
            display flex 
            width 100%
            padding 0
            justify-content space-between
            
</style>
